import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Button, Form, Input, message} from 'antd'
import {regExpConfig} from '@reg'
import Drawer from '@components/draw/draw'
import {
    fetchUpsertMenu,
} from '@apis/manage'

const FormItem = Form.Item

// 连接公用常量、后端返回的数据方法  并放置在props里面调用
@connect((state, props) => ({
    config: state.config,
}))

@Form.create({})

export default class Index extends Component {
    constructor(props) {
        super(props)
        console.log(this.props)
        this.state = {
            loading: false,
            isFirst: this.props.isFirst,
        }
        this.handleSubmit = this.handleSubmit.bind(this)
        this.upDateValue = this.upDateValue.bind(this)
    }

    // 组件已经加载到dom中
    componentDidMount() {
        this.props.form.resetFields()
    }

    upDateValue() {
        if (this.props.pid) {
            this.props.form.setFieldsValue({
                parentid: this.props.pid,
            })
        }
    }

    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((errors, values) => {
            console.log(values)
            if (errors) {
                return;
            }
            values.resType = 1
            this.setState({loading: true})
            let params = {...values};
            if (this.props.type === 'modify') params.menu_id = this.props.itemId;
            fetchUpsertMenu(params, (result) => {
                message.success(result.msg)
                this.setState({loading: false}, () => {
                    this.props.handleOk()
                })
                // this.props.form.resetFields()
            })
        });
    }

    footer() {
        return (
            <div>
                <Button type="primary" onClick={this.handleSubmit}>确定</Button>
                <Button onClick={this.props.onCancel}>取消</Button>
            </div>
        )
    }

    render() {
        const {
            visible, onCancel, title,
        } = this.props
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {span: 5},
            wrapperCol: {span: 17},
        }
        return (
            <Drawer
                visible={visible}
                title={title}
                onCancel={onCancel}
                footer={this.footer()}
                className="modal-header modal-body">
                <div className="modalcontent">
                    <Form layout="horizontal" autoComplete="off" onSubmit={this.handleSubmit}>
                        <FormItem {...formItemLayout} label="上级菜单id" hasFeedback>
                            {getFieldDecorator('menu_parent_id', {
                                initialValue: this.props.pid || '',
                            })(<Input disabled/>)}
                        </FormItem>
                        <FormItem {...formItemLayout} label="新增菜单名称" hasFeedback>
                            {getFieldDecorator('menu_title', {
                                rules: [
                                    {required: true, message: '请输入菜单名称'},
                                ],
                                initialValue: this.props.values.menu_title || '',
                            })(<Input placeholder="请输入菜单名称"/>)}
                        </FormItem>
                        <FormItem {...formItemLayout} label="排序数字" hasFeedback>
                            {getFieldDecorator('menu_sort_index', {
                                rules: [
                                    {required: true, message: '请输入排序数字'},
                                    {pattern: regExpConfig.num, message: '请输入数字'},
                                ],
                                initialValue: `${this.props.values.menu_sort_index || '0'}`,
                            })(<Input placeholder="请输入菜单的排序数字"/>)}
                        </FormItem>
                        {/*<FormItem {...formItemLayout} label="模块名称" hasFeedback>*/}
                        {/*    {getFieldDecorator('menu_title', {*/}
                        {/*        rules: [*/}
                        {/*            {required: true, message: '请输入模块名称'},*/}
                        {/*        ],*/}
                        {/*        initialValue: this.props.values.menu_title || '',*/}
                        {/*    })(<Input placeholder="请输入模块名称"/>)}*/}
                        {/*</FormItem>*/}
                        <FormItem {...formItemLayout} label="关键字" hasFeedback>
                            {getFieldDecorator('menu_key', {
                                rules: [
                                    {required: true, message: '请输入关键字'},
                                ],
                                initialValue: `${this.props.values.menu_key || ''}`,
                            })(<Input placeholder="请输入关键字"/>)}
                        </FormItem>
                        {/*<FormItem {...formItemLayout} label="图标名称" hasFeedback>*/}
                        {/*    {getFieldDecorator('menu_icon', {*/}
                        {/*        rules: [*/}
                        {/*            {*/}
                        {/*                required: true, message: '请输入图标名称',*/}
                        {/*            },*/}
                        {/*            {pattern: regExpConfig.isNumAlpha, message: '图标名称格式不正确'},*/}
                        {/*        ],*/}
                        {/*        initialValue: `${this.props.values.menu_icon || ''}`,*/}
                        {/*    })(<Input placeholder="请输入图标名称"/>)}*/}
                        {/*</FormItem>*/}
                    </Form>
                </div>
            </Drawer>
        )
    }
}
